<template>
  <div class="grid-content ep-bg-purple">
    <!-- 搜索区域 -->
    <el-card>
      <el-row :gutter="20" class="el-form-query">
        <el-col :span="6">
          <el-select v-model="searchForm.service" placeholder="微服务">
            <el-option label="agent:songs" value="songs"/>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="searchForm.instance" placeholder="实例">
            <el-option label="agent:songs" value="songs"/>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-input v-model="searchForm.endpoint" placeholder="接口"/>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-card style="margin-top: 10px">
      <el-row :gutter="20">
        <!--请求数-->
        <el-col :span="6">
          <div class="grid-content ep-bg-purple"/>
          <div class="demo-panel">
            <el-statistic :value="98500">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  <h2 style="color: #0352f1">请求量</h2>
                  <el-tooltip
                      effect="dark"
                      content="Number of users who logged into the product in one day"
                      placement="top"
                  >
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning/>
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>较昨日</span>
                <span class="green">
              24%
              <el-icon>
                <CaretTop/>
              </el-icon>
            </span>
              </div>
            </div>
          </div>
          <div id="requestCountChartId" class="chart-container"></div>
          <div style="margin-top: 30px">
            <h3>请求量Top5</h3>
            <div v-for="(item,index) in requestCountTop" :key="index" style="margin-top: 10px">
              <span>{{ item.label }}</span>
              <el-progress
                  :text-inside="true"
                  :stroke-width="20"
                  :percentage="item.value / requestCountTop[0].value * 100">
                <span>{{ item.value }}</span>
              </el-progress>
            </div>
          </div>
        </el-col>

        <!--错误数-->
        <el-col :span="6">
          <div class="grid-content ep-bg-purple"/>
          <div class="demo-panel">
            <el-statistic :value="693700">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  <h2 style="color: red">错误数</h2>
                  <el-tooltip
                      effect="dark"
                      content="Number of users who logged into the product in one month"
                      placement="top"
                  >
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning/>
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>较昨日</span>
                <span class="red">
              12%
              <el-icon>
                <CaretBottom/>
              </el-icon>
            </span>
              </div>
            </div>
          </div>
          <div id="errorCountChartId" class="chart-container"></div>
          <div style="margin-top: 30px">
            <h3>错误数Top5</h3>
            <div v-for="(item,index) in errorCountTop" :key="index" style="margin-top: 5px">
              <span>{{ item.label }}</span>
              <el-progress
                  :text-inside="true"
                  :stroke-width="20"
                  :percentage="item.value / errorCountTop[0].value * 100">
                <span>{{ item.value }}</span>
              </el-progress>
            </div>
          </div>
        </el-col>

        <!--平均耗时-->
        <el-col :span="6">
          <div class="grid-content ep-bg-purple"/>
          <div class="demo-panel">
            <el-statistic :value="98500">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  <h2 style="color: #0352f1">平均耗时</h2>
                  <el-tooltip
                      effect="dark"
                      content="Number of users who logged into the product in one day"
                      placement="top"
                  >
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning/>
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>较昨日</span>
                <span class="red">
              12%
              <el-icon>
                <CaretBottom/>
              </el-icon>
            </span>
              </div>
            </div>
          </div>
          <div id="responseTimeAvgChartId" class="chart-container"></div>
          <div style="margin-top: 30px">
            <h3>平均耗时Top5</h3>
            <div v-for="(item,index) in responseTimeAvgTop" :key="index" style="margin-top: 10px">
              <span>{{ item.label }}</span>
              <el-progress
                  :text-inside="true"
                  :stroke-width="20"
                  :percentage="item.value / responseTimeAvgTop[0].value * 100">
                <span>{{ item.value }}</span>
              </el-progress>
            </div>
          </div>
        </el-col>

        <!-- 告警-->
        <el-col :span="5">
          <div class="grid-content ep-bg-purple"/>
          <div class="demo-panel">
            <el-statistic :value="1231231">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  <h2 style="color: red">告警</h2>
                  <el-tooltip
                      effect="dark"
                      content="Number of users who logged into the product in one day"
                      placement="top"
                  >
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning/>
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>较昨日</span>
                <span class="red">
              12%
              <el-icon>
                <CaretBottom/>
              </el-icon>
            </span>
              </div>
            </div>
          </div>
          <div id="alarmChartId" class="chart-container"></div>
          <div style="margin-top: 30px">
            <h3>告警类别统计</h3>
            <div v-for="(item,index) in alarmTop" :key="index" style="margin-top: 10px">
              <span>{{ item.label }}</span>
              <el-progress
                  :text-inside="true"
                  :stroke-width="20"
                  :percentage="item.value / alarmTop[0].value * 100">
                <span>{{ item.value }}</span>
              </el-progress>
            </div>
          </div>
        </el-col>
      </el-row>


    </el-card>
  </div>
</template>

<script setup>
import {CaretBottom, CaretTop, Warning} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import * as echarts from 'echarts';

const searchForm = ref({
  agent: '',
  instance: '',
  endpoint: '',
  timeRange: ['', '']
});

const initCharts = (elementId, title, color, xAxisData, yAxisData) => {
  const chartOption = {
    title: {
      text: title
    },
    color: color,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '2%',
      containLabel: true
    },

// 配置工具箱，包括一个保存为图片的功能
    toolbox: {
      feature: {
        saveAsImage: {},
      }
    },
    xAxis: [
      {
        axisPointer: {
          type: 'shadow' // 默认指示器样式
        },
        type: 'category',
        data: xAxisData,

      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: yAxisData
  };
  const chartInstance = echarts.init(document.getElementById(elementId));
  chartInstance.setOption(chartOption);
  chartInstance.resize();
}

const requestCountData = reactive({
  xAxisData: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
  yAxisData: [
    {
      type: 'bar',

      data: [10, 52, 200, 334, 390, 330, 220, 390, 330, 220, 390, 330]
    }
  ]
})

const errorCountData = reactive({
  xAxisData: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
  yAxisData: [
    {
      type: 'bar',
      data: [10, 52, 200, 334, 390, 330, 220, 390, 330, 220, 390, 330]
    }
  ]
})

const responseTimeAvgData = reactive({
  xAxisData: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
  yAxisData: [
    {
      type: 'line',
      name: 'p99',
      data: [11, 22, 22, 11, 22, 22, 33, 22, 33, 22, 22, 33]
    },
    {
      type: 'line',
      name: 'p90',
      data: [10, 11, 11, 22, 22, 22, 22, 33, 33, 22, 11, 22]
    },
    {
      type: 'line',
      name: 'p75',
      data: [12, 22, 33, 33, 22, 33, 22, 22, 33, 22, 22, 11]
    },
    {
      type: 'line',
      name: '耗时',
      data: [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11]
    }
  ]
})

const alarmData = reactive({
  xAxisData: ['p1', 'p2', 'p3', 'p4', 'p5'],
  yAxisData: [
    {
      type: 'bar',
      data: [11, 22, 22, 11, 22]
    }
  ]
})

onMounted(() => {
  initCharts('requestCountChartId', '请求量/2h', ['#0352f1'], requestCountData.xAxisData, requestCountData.yAxisData);
  initCharts('errorCountChartId', '错误数/2h', ['#f1031f'], errorCountData.xAxisData, errorCountData.yAxisData);
  initCharts('responseTimeAvgChartId', '平均耗时/2h', ['#fcd201', '#0df604', '#f1031f', '#0352f1'], responseTimeAvgData.xAxisData, responseTimeAvgData.yAxisData);
  initCharts('alarmChartId', '未处理告警数', ['#f31b08'], alarmData.xAxisData, alarmData.yAxisData);
});

const requestCountTop = reactive([
  {
    label: '/system/getUser',
    value: 39213
  }, {
    label: '/system/getUser',
    value: 21213
  }, {
    label: '/system/getUser',
    value: 11213
  }, {
    label: '/system/getUser',
    value: 10213
  }, {
    label: '/system/getUser',
    value: 1001
  }
])
const errorCountTop = reactive([
  {
    label: '/system/getUser',
    value: 39213
  }, {
    label: '/system/getUser',
    value: 21213
  }, {
    label: '/system/getUser',
    value: 11213
  }, {
    label: '/system/getUser',
    value: 10213
  }, {
    label: '/system/getUser',
    value: 1001
  }
])
const responseTimeAvgTop = reactive([
  {
    label: '/system/getUser',
    value: 39213
  }, {
    label: '/system/getUser',
    value: 21213
  }, {
    label: '/system/getUser',
    value: 11213
  }, {
    label: '/system/getUser',
    value: 10213
  }, {
    label: '/system/getUser',
    value: 1001
  }
])
const alarmTop = reactive([
  {
    label: '应用系统',
    value: 39213
  }, {
    label: '微服务',
    value: 21213
  }, {
    label: '实例',
    value: 11213
  }, {
    label: '接口',
    value: 10213
  }, {
    label: '链路',
    value: 1001
  }
])


const handleSearch = () => {
  // 实现搜索逻辑
};
</script>
<style scoped>

.demo-panel {
  margin-left: 10px;
}

.chart-container {
  height: 200px;
  margin-top: 30px
}

:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}

.el-form-query . el-row {
  height: 34px;
}

.red {
  color: var(--el-color-error);
}


.grid-content {
  border-radius: 4px;
}
</style>

